<template>
    <div class="wrapper">
        <div class="header">
            <span v-if="this.$store.state.user.isLogin === false">
                <a href="/login">你好,请登录</a>
                <a href="#" class="reg">免费注册</a> &nbsp;&nbsp;|
            </span>
            <span v-else>
                <a href="/profile?activeIndex=1">{{ this.$store.state.user.name }},欢迎进入慕西商城</a>
                <a href="#" @click="logout">退出</a> &nbsp;&nbsp;|
            </span>
            <a href="/profile?activeIndex=3">我的订单</a>
        </div>
    </div>
</template>

<script setup>
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'

    const router = useRouter()
    const store = useStore()


    const logout = () => {
        window.localStorage.setItem("token",'')
        store.commit("setIsLogin",false)
        router.push({path:'/'})
    }


</script>

<style lang="less" scoped>
    .wrapper {
        background-color: #e3e4e5;
        height: 30px;
        .header {
            width: var(--content-width);
            margin: 0 auto;
            text-align: right;
            line-height: 30px;

            a {
                color: var(--font-gray);
                margin-left: 10px;
                &:hover {
                    color: var(--font-red);
                }

                &.reg {
                    color: var(--font-red);
                }
            }

        }
    }
</style>